import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Space, Button, Modal, Input, Form, Select } from 'antd'
import axios from 'axios';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import ModifyForm from '@/components/Form/modifyForm/index';
import { formList } from "./option";
import DayPlanApi from '@/pages/Plan/api/dayPlan';

const dayPlanApi = new DayPlanApi;

export default function EditDialog(props: any) {
    const { dialogVisible, onSubmit, title, initialValues, planTypes } = props
    const [open, setOpen] = useState(false)

    useEffect(() => {
        setOpen(props.dialogVisible)
    }, [props])

    const cancel = () => {
        setOpen(false)
    }
    // 提交编辑信息
    const submit = (value: any) => {
        if (title === '新增') {
            //发送请求
            let params = {
                ...value,
                planType: {
                    id: value.planType.key,
                    label: value.planType.label
                },
                startTime: value.timeLine[0],
                endTime: value.timeLine[1],
                timeLine: undefined,
            }
            dayPlanApi.addDayPlan(params).then((res) => {
                setOpen(false)
                onSubmit()
            })
        } else {
            let params = {
                id: initialValues.id,
                ...value,
                startTime: value.timeLine[0],
                endTime: value.timeLine[1],
                timeLine: undefined,
            }
            dayPlanApi.editDayPlan(params).then((res) => {
                setOpen(false)
                onSubmit()
            })
        }

    }
    return (
        <div className={styles.dayPlanDialog}>
            {/* 新增页面 */}
            < Modal
                title={title}
                destroyOnClose={true}
                centered
                footer={null}
                open={open}
                width={1000}
                onCancel={cancel}
            >
                <ModifyForm formList={formList} onSubmit={submit} initialValues={initialValues} onCancel={cancel}>
                    {
                        {
                            planType: (
                                <Form.Item
                                    label='计划分类'
                                    name='planType'
                                    style={{
                                        height: '50px', marginBottom: '0'
                                    }}
                                    rules={[{ required: true, message: '请选择计划分类' }]}
                                >
                                    <Select
                                        placeholder={'请选择计划分类'}
                                        options={planTypes}
                                        labelInValue={true}
                                    >
                                    </Select>
                                </Form.Item>
                            ),
                        }
                    }
                </ModifyForm>
            </Modal >
        </div >
    )
}
